import { 
  AxesHelper,
  HemisphereLight,
  Mesh,
  PerspectiveCamera, 
  Scene, 
  WebGLRenderer,
  MeshLambertMaterial,
} from "three"
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import stats from '../utils/stats'

let scene = new Scene()
const camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000)
// 不能设置为0
camera.position.set(-3, 13, 39)

const renderer = new WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setClearColor(0xeeeeee)
renderer.setSize(window.innerWidth, window.innerHeight)

document.body.appendChild(renderer.domElement)

new OrbitControls(camera, renderer.domElement)

// 添加坐标系
const axes = new AxesHelper(10)
scene.add(axes)

const light = new HemisphereLight(0xffffff, 0xcccccc, 1)
scene.add(light)

const loader = new OBJLoader()
loader.load(
  '/models/pinecone/pinecone.obj',
  mesh => {
    let material = new MeshLambertMaterial({
      color: 0x5c3a21
    })

    mesh.children.forEach(child => {
      (child as Mesh).material = material;
      (child as Mesh).geometry.computeVertexNormals();
    })

    mesh.scale.set(80, 80, 80)

    scene.add(mesh)
  }
)


function render(): void {
  stats.update()

  requestAnimationFrame(render)
  renderer.render(scene, camera)
}

requestAnimationFrame(render)